<template>

  <div>
    <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>
    <div><br />
    </div>
    <div id="xlsxChart"style="width: 90%;height: 500%;"></div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import XLSX from "xlsx";  //引入xlsx
  export default {
    data() {
      return {
        tableData: [],
        settings:{},
        myChart:null,
      };
    },


    /* created() {
      this.getDetailsList()
    }, */


    /* 接收groupIdex传来的参数 */
    mounted(){
      this.databar = this.$route.query.b
      this.updateChart()
    },

    methods:{
      //初始化echartInstance对象
      initChart(){
        this.myChart = echarts.init(document.getElementById('xlsxChart'));
      },
      //获取数据
      getData(){},
      //更新图标
      updateChart(){
        const ha = this.databar.colHeaders
        const sellerName = this.databar.data.map((item) =>{
          return item.A
        })
        console.log("sellerName",sellerName)
        const sa = this.databar.data.map((item) =>{
          return item.B
        })
        const sb = this.databar.data.map((item) =>{
          return item.C
        })
        const sc = this.databar.data.map((item) =>{
          return item.D
        })
        const sd = this.databar.data.map((item) =>{
          return item.E
        })
        const se = this.databar.data.map((item) =>{
          return item.F
        })
        const sf = this.databar.data.map((item) =>{
          return item.G
        })
        const sg = this.databar.data.map((item) =>{
          return item.H
        })
        const sh = this.databar.data.map((item) =>{
          return item.I
        })
        var data = [
          [0,0,0],[0,1,sa[0]],[0,2,sb[0]],[0,3,sc[0]],[0,4,sd[0]],[0,5,se[0]],[0,6,sf[0]],[0,7,sg[0]],
          [1,0,0],[1,1,sa[1]],[1,2,sb[1]],[1,3,sc[1]],[1,4,sd[1]],[1,5,se[1]],[1,6,sf[1]],[1,7,sg[1]],
          [2,0,0],[2,1,sa[2]],[2,2,sb[2]],[2,3,sc[2]],[2,4,sd[2]],[2,5,se[2]],[2,6,sf[2]],[2,7,sg[2]],
          [3,0,0],[3,1,sa[3]],[3,2,sb[3]],[3,3,sc[3]],[3,4,sd[3]],[3,5,se[3]],[3,6,sf[3]], [3,7,sg[3]],
          [4,0,0],[4,1,sa[4]],[4,2,sb[4]],[4,3,sc[4]],[4,4,sd[4]],[4,5,se[4]],[4,6,sf[4]],[4,7,sg[4]],
          [5,0,0],[5,1,sa[5]],[5,2,sb[5]],[5,3,sc[5]],[5,4,sd[5]],[5,5,se[5]],[5,6,sf[5]],[5,7,sg[5]],
          [6,0,0],[6,1,sa[6]],[6,2,sb[6]],[6,3,sc[6]],[6,4,sd[6]],[6,5,se[6]],[6,6,sf[6]],[6,7,sg[6]],
          [7,0,0],[7,1,sa[7]],[7,2,sb[7]],[7,3,sc[7]],[7,4,sd[7]],[7,5,se[7]],[7,6,sf[7]],[7,7,sg[7]],
          [8,0,0],[8,1,sa[8]],[8,2,sb[8]],[8,3,sc[8]],[8,4,sd[8]],[8,5,se[8]],[8,6,sf[8]],[8,7,sg[8]],
          [9,0,0],[9,1,sa[9]],[9,2,sb[9]],[9,3,sc[9]],[9,4,sd[9]],[9,5,se[9]],[9,6,sf[9]],[9,7,sg[9]],
          [10,0,0],[10,1,sa[10]],[10,2,sb[10]],[10,3,sc[10]],[10,4,sd[10]],[10,5,se[10]],[10,6,sf[10]],[10,7,sg[10]],
          [11,0,0],[11,1,sa[11]],[11,2,sb[11]],[11,3,sc[11]],[11,4,sd[11]],[11,5,se[11]],[11,6,sf[11]],[11,7,sg[11]],
          [12,0,0],[12,1,sa[12]],[12,2,sb[12]],[12,3,sc[12]],[12,4,sd[12]],[12,5,se[12]],[12,6,sf[12]],[12,7,sg[12]],
          [13,0,0],[13,1,sa[13]],[13,2,sb[13]],[13,3,sc[13]],[13,4,sd[13]],[13,5,se[13]],[13,6,sf[13]],[13,7,sg[13]],
          [14,0,0],[14,1,sa[14]],[14,2,sb[14]],[14,3,sc[14]],[14,4,sd[14]],[14,5,se[14]],[14,6,sf[14]],[14,7,sg[14]],
          [15,0,0],[15,1,sa[15]],[15,2,sb[15]],[15,3,sc[15]],[15,4,sd[15]],[15,5,se[15]],[15,6,sf[15]],[15,7,sg[15]]
        ];
        data = data.map(function (item) {
          return [item[1], item[0], item[2]];
        });
        const le=this.databar.sellerName
        console.log("sellerName",sellerName)
        const option = {
          title: {
            text: '散点图'
          },
          tooltip: {position: 'top',
            formatter: function (params) {
              return params.value[2] + ' commits in ' + ha[params.value[0]] + ' of ' + sellerName[params.value[1]];
            }},
          legend: {
            data: ['Punch Card'],
            left: 'middle'
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          grid: {
            left: 40,
            bottom: 20,
            right: 45,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ha,
            boundaryGap: false,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#999',
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: sellerName,
            axisLine: {
              show: false
            }
          },
          series: [{
            name: 'Punch Card',
            type: 'scatter',
            symbolSize: function (val) {
              return val[2] * 0.2;
            },
            data: data,
            animationDelay: function (idx) {
              return idx * 5;
            }
          }]
        }
        let myChart = echarts.init(document.getElementById('xlsxChart'));
        myChart.setOption(option)
      },

    }

  }
</script>

<style>

</style>

